<!--
 * @Author: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @Date: 2025-06-20 14:24:27
 * @LastEditors: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @LastEditTime: 2025-06-25 08:46:15
 * @FilePath: \project_keep\keep_motion_manger\src\views\register\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="register">
      <div class="register-title">Keep后台管理系统</div>
      <el-form :model="form" :rules="rules" ref="forms" class="register-form" label-width="120px">
        <el-form-item label="账号" prop="userName">
            <el-input v-model="form.userName" size="large"/>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
            <el-input v-model="form.passWord" size="large"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="pardenPassWord">
            <el-input v-model="form.pardenPassWord" size="large"/>
        </el-form-item>
        <el-form-item label="角色" prop="role">
            <el-input v-model="form.role" size="large"/>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
            <el-input v-model="form.code" size="large"/>
            <lintCode :options="captcha" ref="captchaRef" @click="refrechCode"/>
        </el-form-item>
      </el-form>
      <div class="register-btns">
        <el-button type="primary" @click="register">注册</el-button>
      </div>
      <div class="register-tips">
        <el-link href="/login" type="info">已有账号? 登录</el-link>
      </div>
  </div>
</template>
<script setup>
import './index.css';

import {onMounted, reactive, ref} from 'vue';
import lintCode from '@/components/lintCode/index.vue';
import { authApi } from '@/api';

const formParam = {
    userName: '',
    passWord: '',
    pardenPassWord: '',
    role: '',
    code: '',
};
const captchaOptions = {
  width: 120,
  height: 40
};
// form
const form = reactive(formParam);
const forms = ref(null);
// lintCode
const captcha = ref(captchaOptions);
const captchaRef = ref(null);
// 自定义验证函数 - 检查用户名是否包含空格
const validateUsername = (rule, value, callback) => {
    if (value.includes(' ')) {
    callback(new Error('用户名不能包含空格'));
    } else {
    callback();
    }
};

// 自定义验证函数 - 检查两次密码是否一致
const validatePassword = (rule, value, callback) => {
    if (value !== form.passWord) {
    callback(new Error('两次输入的密码不一致'));
    } else {
    callback();
    }
};
// 自定义验证函数 - 校验 图形验证码
const validateCode = (rule, value, callback) => {
    if (!captchaRef.value.validate(value)) {
        callback(new Error('验证码错误'));
    } else {
        callback();
    }
};
const rules = reactive({
    userName: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' },
        { validator: validateUsername, trigger: 'blur' }
    ],
    passWord: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 8, message: '密码长度至少为 8 个字符', trigger: 'blur' },
    ],
    pardenPassWord: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
        { validator: validatePassword, trigger: 'blur' }
    ],
    role: [
        { required: true, message: '请输入角色', trigger: 'blur' },
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { validator: validateCode, trigger: 'blur' }
    ]
});

onMounted(() => {
});
// 注册
const register = () => {
    forms.value.validate((valid, fields) => {
        if (valid) {
            console.log('submit!');
            authApi.register(form).then(res => {
                console.log(res);
            });
        } 
    })
};
// 点击刷新验证码
const refrechCode = () => {
    captchaRef.value.refresh();
};
</script>